<template>
    <el-dialog
            :title="isEdit ? '编辑': '添加'"
            :visible.sync="addBikeVisible"
            width="50%"
            :append-to-body='true'

            :before-close="closeAddBike">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="名称">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="详情描述">
                <textarea
                        style="width: 100%; outline: none;border: 0.5px solid #DCDFE6; padding: 5px 10px;border-radius: 15px"
                        v-model="form.intro"></textarea>
            </el-form-item>
            <el-form-item label="详情图" v-show="!isEdit">
                <el-upload
                        action="http://test.goutclass.top/uploadFile"
                        :on-remove="handleRemove"
                        :on-change="addFileList"
                        :on-exceed="onExceed"
                        :multiple="true"
                        :auto-upload="false"
                        list-type="picture-card"
                        :limit="4"
                        ref="deleUploadImgs"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <div class="select clearfix">
                <el-form-item label="类别">
                    <el-select v-model="form.kind" size="mini" placeholder="类型">
                        <el-option
                                v-for="item in this.kindList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="尺寸">
                    <el-select v-model="form.size" size="mini" placeholder="类型">
                        <el-option
                                v-for="item in this.sizeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="速别">
                    <el-select v-model="form.quick" size="mini" placeholder="类型">
                        <el-option
                                v-for="item in this.quickList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="材质">
                    <el-select v-model="form.texture" size="mini" placeholder="类型">
                        <el-option
                                v-for="item in this.textureList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="系统">
                    <el-select v-model="form.system" size="mini" placeholder="类型">
                        <el-option
                                v-for="item in this.systemList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item label="积分">
                <el-input v-model="form.integral"></el-input>
            </el-form-item>
            <el-form-item label="库存">
                <el-input v-model="form.count"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="closeAddBike">取 消</el-button>
    <el-button type="primary" @click="addSubmit">确 定</el-button>
  </span>
    </el-dialog>
</template>

<script>
    import {kindList, sizeList, quickList, textureList, systemList} from "../../../data";
    import config from "./../../../config"
    import {uploadFile, addBike, reviseBike} from "../../../api";

    export default {
        name: "addBike",
        data() {
            return {
                formLabelWidth: '120px',
                kindList: kindList,
                sizeList: sizeList,
                quickList: quickList,
                textureList: textureList,
                systemList: systemList,

                fileList: [],
                form: {
                    adminId: '',
                    title: '',
                    intro: '',
                    images: [],
                    kind: '',
                    size: '',
                    quick: '',
                    texture: '',
                    system: '',
                    integral: '',
                    count: ''
                },
            }
        },
        props: {
            addBikeVisible: Boolean,
            isEdit: Boolean,
            editData: {}
        },
        mounted() {
            let adminUserInfo = JSON.parse(config.getCache("adminUserInfo"));
            this.form.adminId = adminUserInfo.id;
        },
        methods: {

            // 超出图片提示
            onExceed() {
                this.$message({
                    message: "详情图仅可上传4张",
                    type: "warning"
                });
            },
            //上传详情图(多张)
            addFileList(file, fileList) {
                this.fileList = fileList;
            },
            //文件移除时的函数
            handleRemove(file, fileList) {
                this.fileList = fileList;
            },
            async addSubmit() {
                // this.isEdit ? this.editBike() : this.addBike()
                //上传图片
                let imagesDetail = [];
                for (let index in this.fileList) {
                    let formData = new FormData();
                    formData.append("image", this.fileList[index].raw);
                    let imgRes = await uploadFile(formData);
                    imagesDetail.push({file: imgRes.url})
                }
                this.form.images = imagesDetail;
                window.console.log(this.form, 'this.form');
                for (let index in this.form) {
                    if (this.form[index] === "") {
                        this.$message({
                            message: "请填写完整信息",
                            type: "warning"
                        });
                        return
                    }
                    if (this.form.images.length === 0 && !this.isEdit) {
                        this.$message({
                            message: "请上传详情图",
                            type: "warning"
                        });
                        return;
                    }
                }
                this.form.images = JSON.stringify(this.form.images);
                !this.isEdit ? addBike(this.form).then(res => {
                    if (res.code === 200) {
                        this.clearForm();
                        this.$message({
                            message: "添加成功",
                            type: "success"
                        });
                        this.closeAddBike()
                    } else {
                        // this.clearForm();
                        this.$message({
                            message: res.data,
                            type: "warning"
                        })
                    }
                }) : reviseBike(this.form).then(res => {
                    if (res.code === 200) {
                        this.clearForm();
                        this.$message({
                            message: "修改成功",
                            type: "success"
                        });
                        this.closeAddBike()
                    } else {
                        // this.clearForm();
                        this.$message({
                            message: res.data,
                            type: "warning"
                        })
                    }
                })
            },
            async addBike() {
                //上传图片

            },
            //关闭蒙版
            closeAddBike() {
                this.$emit("closeAddBike", false);
                this.clearForm();
            },
            //发布成功与否，清除表单
            clearForm() {
                // let {adminId, title, intro, images, kind, size, quick, texture, system, integral, count} = this.form;
                this.form.title = '';
                this.form.intro = '';
                this.form.images = [];
                this.form.kind = '';
                this.form.size = '';
                this.form.quick = '';
                this.form.texture = '';
                this.form.system = '';
                this.form.integral = '';
                this.form.count = '';
                this.$refs.deleUploadImgs.uploadFiles = []
            }
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
    .clearfix {
        overflow: auto;
    }

    .select {
        .el-form-item {
            float left
        }
    }
</style>
